<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
#div1 {ALIGN:center";position:absolute; top:100pt; left:100pt;margin-top:100px; margin-right:300px; 
margin-left:300px;width:400px;height:400px;padding:20px;border:1px solid #aaaaaa; border-radius: 8px;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
event.dataTransfer.effectAllowed = "copy";

}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id=maintextarea></div>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)">

<textarea id=textarea  style="border:2px dotted grey;margin-top:0px;margin-bottom:10px; margin-right:0px; 
margin-left:0px;width:400px;height:50px;position:absolute;text-align:center;"  >Title</textarea>
</div>
<p id="textdrag" draggable="true" ondragstart="drag(event)">b;blablabla</p>

</body>
</html>